<template>
	<view>
		<view class="top">
			<text>{{text}}</text>
			<u-icon v-if="showIcon" name="trash" size="40rpx" @click="clickIcon"></u-icon>
		</view>

		<view class="tag-container">
			<u-tag v-for="item in list" :text="item.text" :type="item.hot ? 'error' :  'info'" mode="plain"
				@click="clickTag(item.text)" />
		</view>

	</view>
</template>

<script>
	export default {
		name: "MyTags",
		props: {
			text: {
				type: String,
				default: ''
			},
			showIcon: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default () {
					// 要求用户传入数组的时候，每个数组项必须要有text和hot字段
					return []
				}
			}
		},
		methods: {
			clickTag(text) {
				this.$emit('clickTag', text)
			},
			clickIcon() {
				this.$emit('clickIcon')
			}
		}
	}
</script>

<style lang="scss">
	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		font-size: 40rpx;
	}

	.tag-container {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;

		/* #ifdef H5  */
		.u-tag {
			margin-right: 10rpx;
			margin-bottom: 10rpx;
		}

		/* #endif  */


		/* #ifdef MP-WEIXIN  */
		u-tag {
			margin-right: 10rpx;
			margin-bottom: 10rpx;
		}

		/* #endif  */
	}
</style>
